<template>
  <view class="goods_detail" v-if="goods">
    <!-- 轮播图 -->
    <u-swiper
      :list="goods.pics"
      keyName="pics_big"
      :autoplay="true"
      circular="true"
      height="750rpx"
      indicator
      indicatorMode="dot"
      radius="0"
      @click="onPreviewImage"
    ></u-swiper>
    <!-- 价格和名称 -->
    <view class="goods_info">
      <view class="goods_price">¥{{ goods.goods_price }}</view>
      <view class="goods_name u-line-2">{{ goods.goods_name }}</view>
    </view>
    <!-- 图文详情 -->
    <view class="goods_introduce">
      <view class="goods_introduce_title">图文详情</view>
      <view class="goods_introduce_content">
        <rich-text :nodes="goods.goods_introduce"></rich-text>
      </view>
    </view>
    <!-- 购物车栏 -->
    <view class="navigation">
      <view class="left">
        <view class="item">
          <u-icon
            name="server-fill"
            :size="40"
            :color="$u.color['contentColor']"
          ></u-icon>
          <view class="text u-line-1">联系客服</view>
        </view>
        <navigator
          class="item car"
          open-type="switchTab"
          url="/pages/cart/cart"
        >
          <view
            style="display: inline-block; position: absolute; right: 0; top: 0"
          >
            <u-badge class="car-num" :value="cartNum" type="error"></u-badge>
          </view>
          <u-icon
            name="shopping-cart"
            :size="40"
            :color="$u.color['contentColor']"
          ></u-icon>
          <view class="text u-line-1">购物车</view>
        </navigator>
      </view>
      <view class="right">
        <view class="cart btn u-line-1" @click="addCart">加入购物车</view>
        <view class="buy btn u-line-1">立即购买</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      goods: null,
    };
  },
  async onLoad({ goods_id }) {
    goods_id = goods_id || 26948;
    console.log(goods_id);
    const res = await uni.$u.http.get("/goods/detail", {
      params: {
        goods_id,
      },
    });
    console.log(res);
    this.goods = res.message;
  },
  computed: {
    cartNum() {
      let sum = 0;
      this.$store.state.cartList.forEach((item) => {
        sum += item.nums;
      });
      return sum;
    },
  },
  methods: {
    // 点击轮播图放大预览
    onPreviewImage(index) {
      const current = index;
      const urls = this.goods.pics.map((item) => item.pics_big);
      console.log(urls);
      uni.previewImage({
        urls,
        current,
      });
    },
    // 点击加入购物车
    addCart() {
      // 获取当前购买的商品信息
      // console.log(this.goods);
      const cartList = this.$store.state.cartList;
      // console.log(cartList);
      // 判断当前商品是否在以前选购过
      const index = cartList.findIndex(
        (item) => item.goods_id === this.goods.goods_id
      );
      if (index === -1) {
        cartList.push({ ...this.goods, checked: true, nums: 1 });
      } else {
        // console.log("购物车中存在该商品");
        cartList[index].nums++;
        // console.log(cartList[index]);
      }
      // 将数据又设置到state中，通过mutations实现
      this.$store.commit("setCartList", cartList);
    },
  },
};
</script>

<style lang="scss">
.goods_detail {
  padding-bottom: 102rpx;
  .goods_info {
    padding: 15rpx;
    .goods_price {
      color: #eb4450;
      font-size: 32rpx;
    }
    .goods_name {
      color: #666;
    }
  }
}

.goods_introduce {
  .goods_introduce_title {
    text-align: center;
    color: #666;
    padding: 20rpx 0;
  }
}

.navigation {
  position: fixed;
  width: 100%;
  bottom: 0;
  left: 0;
  display: flex;
  margin-top: 100rpx;
  border: solid 2rpx #f2f2f2;
  background-color: #ffffff;
  .left {
    display: flex;
    font-size: 20rpx;
    .item {
      margin: 0 30rpx;
      &.car {
        text-align: center;
        position: relative;
        .car-num {
          position: absolute;
          top: -10rpx;
          right: -10rpx;
        }
      }
    }
  }
  .right {
    display: flex;
    font-size: 28rpx;
    align-items: center;
    .btn {
      line-height: 66rpx;
      padding: 0 30rpx;
      border-radius: 36rpx;
      color: #ffffff;
    }
    .cart {
      background-color: #ed3f14;
      margin-right: 30rpx;
    }
    .buy {
      background-color: #ff7900;
    }
  }
}
</style>